<template>
    <div>
        <cus-modal ref="modal" :title="!form.mouldId ? '添加食谱模板' : '修改食谱模板'" @on-visible-change="onVisibleChange"
            width="85" @onOk="onOk">
            <div style="display:flex">
                <Form ref="formValidate" :model="form">
                    <div class="formBox" style="margin-bottom:20px">
                        <div class="formBox-item">
                            <FormItem label="模板名称:" prop="mouldName" :label-width="90"
                                :rules="[{ required: true, message: '模板名称不能为空', trigger: 'blur' }]">
                                <Input v-model="form.mouldName" maxlength=20 clearable placeholder="请输入模板名称"
                                    style="width: 200px">
                                </Input>
                            </FormItem>
                        </div>
                        <!-- <div class="formBox-item">
                            <FormItem label="参考模板:" prop="topCode" :label-width="80">
                                <Select v-model="form.topCode" style="width:200px" placeholder="请选择参考模板" clearable>
                                    <Option value="1">参考模板1</Option>
                                    <Option value="2">参考模板2</Option>
                                    <Option value="3">参考模板3</Option>
                                </Select>
                            </FormItem>
                        </div> -->
                        <div class="formBox-item">
                            <FormItem label="地区:" prop="place" :label-width="80">
                                <Select v-model="form.place" style="width:200px" placeholder="请选择地区" clearable>
                                    <Option value="北京">北京</Option>
                                    <Option value="上海">上海</Option>
                                    <Option value="天津">天津</Option>
                                    <Option value="重庆">重庆</Option>
                                    <Option value="河北">河北</Option>
                                    <Option value="山西">山西</Option>
                                    <Option value="内蒙古">内蒙古</Option>
                                    <Option value="辽宁">辽宁</Option>
                                    <Option value="吉林">吉林</Option>
                                    <Option value="黑龙江">黑龙江</Option>
                                    <Option value="江苏">江苏</Option>
                                    <Option value="浙江">浙江</Option>
                                    <Option value="安徽">安徽</Option>
                                    <Option value="福建">福建</Option>
                                    <Option value="江西">江西</Option>
                                    <Option value="山东">山东</Option>
                                    <Option value="河南">河南</Option>
                                    <Option value="湖北">湖北</Option>
                                    <Option value="湖南">湖南</Option>
                                    <Option value="广东">广东</Option>
                                    <Option value="广西">广西</Option>
                                    <Option value="海南">海南</Option>
                                    <Option value="四川">四川</Option>
                                    <Option value="贵州">贵州</Option>
                                    <Option value="云南">云南</Option>
                                    <Option value="西藏">西藏</Option>
                                    <Option value="陕西">陕西</Option>
                                    <Option value="甘肃">甘肃</Option>
                                    <Option value="宁夏">宁夏</Option>
                                    <Option value="青海">青海</Option>
                                    <Option value="新疆">新疆</Option>
                                    <Option value="香港">香港</Option>
                                    <Option value="澳门">澳门</Option>
                                    <Option value="台湾">台湾</Option>
                                </Select>
                            </FormItem>
                        </div>
                        <div class="formBox-item">
                            <FormItem label="月份:" prop="month" :label-width="80">
                                <Select v-model="form.month" style="width:200px" placeholder="请选择月份" clearable>
                                    <Option value="一月">一月</Option>
                                    <Option value="二月">二月</Option>
                                    <Option value="三月">三月</Option>
                                    <Option value="四月">四月</Option>
                                    <Option value="五月">五月</Option>
                                    <Option value="六月">六月</Option>
                                    <Option value="七月">七月</Option>
                                    <Option value="八月">八月</Option>
                                    <Option value="九月">九月</Option>
                                    <Option value="十月">十月</Option>
                                    <Option value="十一月">十一月</Option>
                                    <Option value="十二月">十二月</Option>
                                </Select>
                            </FormItem>
                        </div>
                        <div class="formBox-item">
                            <FormItem label="模式:" prop="mouldNature" :label-width="80">
                                <Select v-model="form.mouldNature" style="width:200px" placeholder="请选择模式">
                                    <Option :value="0">高标准模式</Option>
                                    <Option :value="1">低标准模式</Option>
                                </Select>
                            </FormItem>
                        </div>
                        <div class="formBox-item">
                            <FormItem label="伙食灶:" prop="boardId" :label-width="90">
                                <Select v-model="form.boardId" style="width:200px" placeholder="请选择模式">
                                    <Option v-for="item in boardrateList" :value="item.id" :key="item.id">{{
            item.ovenClass }}</Option>
                                </Select>
                            </FormItem>
                        </div>
                        <div class="formBox-item">
                            <FormItem label="劳动强度:" prop="labourId" :label-width="80">
                                <Select v-model="form.labourId" style="width:200px" placeholder="请选择模式">
                                    <Option v-for="item in LabourStrengthList" :value="item.labourId"
                                        :key="item.labourId">{{ item.strength }}</Option>
                                </Select>
                            </FormItem>
                        </div>
                        <div class="formBox-item">
                            <FormItem label="配餐模式:" prop="cateringModeName" :label-width="80">
                                <Input v-model="form.cateringModeName" maxlength=20 clearable placeholder="请输入配餐模式"
                                    style="width: 200px">
                                </Input>
                            </FormItem>
                        </div>
                        <cusButton type="primary" @onClick="onImport()">导入</cusButton>
                    </div>
                </Form>
            </div>
            <Table border :loading="loading" :columns="columns" :data="data" :height="400">
                <template slot-scope="{ row, index }" slot="one">
                    <div class="contentBox" v-if="data[index].list">
                        <div class="dishesBox">
                            <div v-for="(item, idx) in data[index].list" :key="idx">
                                {{ item.one }}
                            </div>

                        </div>

                        <div class="btnBox">
                            <div @click="selectDish(index, 'one')">
                                <Icon type="md-add" color="rgba(24, 144, 255, 1)" size="16" />
                                <span style="margin-left: 3px; color: rgba(24, 144, 255, 1)">新增</span>
                            </div>
                            <Poptip confirm title="是否确认删除此区间菜品数据?" @on-ok="onDelete(key, idx)">
                                <div>
                                    <Icon type="md-trash" color="red" size="16" />
                                    <span style="margin-left: 3px; color: red">清空</span>
                                </div>
                            </Poptip>
                        </div>

                    </div>
                </template>
                <template slot - scope=" { row, index }" slot="two">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="(item, idx) in data[index].list" :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'two', item.two)"
                                :style="{ color: item.two ? 'green' : '#33A5FE' }">{{ item.two || '选择菜肴'
                                }}
                            </div>

                            <cusButton v-if="item.two" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.two = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="three">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="( item, idx ) in  data[index].list " :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'three', item.three)"
                                :style="{ color: item.three ? 'green' : '#33A5FE' }">{{ item.three ||
            '选择菜肴' }}</div>
                            <cusButton v-if="item.three" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.three = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="four">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="( item, idx ) in  data[index].list " :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'four', item.four)"
                                :style="{ color: item.four ? 'green' : '#33A5FE' }">{{ item.four ||
            '选择菜肴' }}</div>
                            <cusButton v-if="item.four" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.four = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="five">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="( item, idx ) in  data[index].list " :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'five', item.five)"
                                :style="{ color: item.five ? 'green' : '#33A5FE' }">{{ item.five ||
            '选择菜肴' }}</div>
                            <cusButton v-if="item.five" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.five = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="six">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="( item, idx ) in  data[index].list " :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'six', item.six)"
                                :style="{ color: item.six ? 'green' : '#33A5FE' }">{{ item.six ||
            '选择菜肴' }}</div>
                            <cusButton v-if="item.six" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.six = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="seven">
                    <div class="slotBox" v-if="data[index].list">
                        <div class="slotBox-item" v-for="( item, idx ) in  data[index].list " :key="idx"
                            :class="{ noBorderB: (idx + 1) == data[index].list.length }">
                            <div @click="selectDish(index, idx, 'seven', item.seven)"
                                :style="{ color: item.seven ? 'green' : '#33A5FE' }">{{ item.seven ||
            '选择菜肴' }}</div>
                            <cusButton v-if="item.seven" type="text" :cusStyle="{ color: 'red' }"
                                @onClick="item.seven = ''">
                                删除</cusButton>
                        </div>
                    </div>
                </template>
            </Table>
        </cus-modal>
        <!-- 导入 -->
        <cus-uploadModal ref="cusUploadNutritionTagModal" :temp-src="exportNutritionTagTemp"
            :uploadFnc="uploadNutritionTag"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            @onOk="onInit" @onError="onError"></cus-uploadModal>
        <!-- 选择、替换 菜肴 -->
        <addDishes ref="addDishes" @onAdd="onAdd"></addDishes>
    </div>
</template>

<script>
import {
    setMould,
    getFoodBookMould,
    importMould,
    getMouldDtl,
    getboardrate,
    getLabourStrengthList,
} from "@/api/business/dishesModule";

import addDishes from "./addDishes";
export default {
    components: { addDishes },
    data() {
        return {
            form: {
                id: '',
                mouldId: 0,
                mouldName: '',
                month: '一月',
                place: '',
                mouldNature: 0,
                boardId: '',
                labourId: '',
                cateringModeName: '',
            },
            columns: [
                {
                    title: '餐次',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '星期一',
                    slot: 'one',
                    align: 'center',
                },
                {
                    title: '星期二',
                    slot: 'two',
                    align: 'center',
                },
                {
                    title: '星期三',
                    slot: 'three',
                    align: 'center',
                },
                {
                    title: '星期四',
                    slot: 'four',
                    align: 'center',
                },
                {
                    title: '星期五',
                    slot: 'five',
                    align: 'center',
                },
                {
                    title: '星期六',
                    slot: 'six',
                    align: 'center',
                },
                {
                    title: '星期日',
                    slot: 'seven',
                    align: 'center',
                },
            ],
            data: [],
            exportNutritionTagTemp: getFoodBookMould,
            uploadNutritionTag: importMould,
            loading: false,
            LabourStrengthList: [],
            boardrateList: []
        };
    },
    mounted() {
        // this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.data = [];
                this.form = { id: '', mouldId: 0, mouldName: '', month: '一月', place: '', mouldNature: 0 }
            }
        },
        show() {
            this.getboardrateApi()
            this.getLabourStrengthListApi()
            this.getMouldDtlApi();
            this.$refs["modal"].show = true;
            this.exportNutritionTagTemp = getFoodBookMould + `&mouldId=${this.form.mouldId}`
        },
        async getboardrateApi() {
            const res = await getboardrate({
                boardRateType: 0
            })
            if (res.retCode == 2000) {
                this.boardrateList = res.data
            } else {
                this.$Message.error(res.retMsg)
            }
        },

        async getLabourStrengthListApi() {
            const res = await getLabourStrengthList()
            if (res.retCode == 2000) {
                this.LabourStrengthList = res.data
            } else {
                this.$Message.error(res.retMsg)
            }
        },


        onOk() {
            this.$refs["formValidate"].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.setMouldApi();
                }
            });
        },
        // 保存
        setMouldApi() {
            return new Promise((resolve) => {
                let arr = [];
                this.data.forEach((item) => {
                    if (item.list) {
                        arr.push(...item.list)
                    }
                })
                setMould({

                    ...this.form,
                    foodBookMoulddtlList: arr
                }).then((res) => {
                    this.loading = false
                    if (res.retCode === 2000) {
                        this.$Message.success(`${this.form.mouldId ? '编辑' : '添加'}模板成功`);
                        this.$refs["modal"].show = false;
                        this.$parent.onInit();
                        resolve();
                    }
                });
            });
        },
        onInit(res) {
            this.data = [];
            let bObj = { name: '早餐', mealTimes: 0, list: [] };
            let lObj = { name: '午餐', mealTimes: 1, list: [] };
            let dObj = { name: '晚餐', mealTimes: 2, list: [] };
            res.data.forEach(item => {
                if (item.mealTimes == 0) {
                    bObj.list.push(item)
                }
                if (item.mealTimes == 1) {
                    lObj.list.push(item)
                }
                if (item.mealTimes == 2) {
                    dObj.list.push(item)
                }
            });
            this.data = [bObj, lObj, dObj];
        },
        onImport() {
            this.$refs['cusUploadNutritionTagModal'].show()
        },
        // 获取详情
        getMouldDtlApi() {
            this.loading = true;
            this.data = [];
            return new Promise((resolve) => {
                getMouldDtl({ mouldId: this.form.mouldId }).then((res) => {
                    this.loading = false;
                    if (res.retCode === 2000) {
                        if (this.form.mouldId) {
                            this.form.id = res.data.id;
                            this.form.mouldId = res.data.mouldId;
                            this.form.mouldName = res.data.mouldName;
                            this.form.month = res.data.month;
                            this.form.place = res.data.place;
                            this.form.mouldNature = res.data.mouldNature;
                            this.form.boardId = res.data.boardId;
                            this.form.labourId = res.data.labourId;
                            this.form.cateringModeName = res.data.cateringModeName;
                        }
                        let bObj = { name: '早餐', mealTimes: 0, list: [] };
                        let lObj = { name: '午餐', mealTimes: 1, list: [] };
                        let dObj = { name: '晚餐', mealTimes: 2, list: [] };
                        res.data.foodBookMoulddtlList.forEach(item => {
                            if (item.mealTimes == 0) {
                                bObj.list.push(item)
                            }
                            if (item.mealTimes == 1) {
                                lObj.list.push(item)
                            }
                            if (item.mealTimes == 2) {
                                dObj.list.push(item)
                            }
                        });
                        this.data = [bObj, lObj, dObj];
                        console.log(this.data)
                        resolve();
                    }
                });
            });
        },
        // 添加 、 替换菜肴
        selectDish(index, num) {
            // this.$refs['addDishes'].form.name = name;
            this.$refs['addDishes'].show();
            this.$refs['addDishes'].selectList = this.data[index].list[num] || []
            console.log(this.data[index].list[num], 333)
        },
        onAdd(form, name) {
            console.log(form, name)
            // let nameTem = this.$cu.deepClone(name);
            // this.$set(this.data[form.index].list[form.idx], form.key, nameTem)
        },
        // 导入错误
        onError(data) {
            if (data.retCode == 2888) {
                let content = "";
                data.data.map(it => {
                    content += `<p style="margin-top:5px">${it}</p>`
                })
                this.$Modal.warning({
                    title: data.retMsg,
                    content: content,
                    width: '600',
                    okText: "确认"
                });
            }
        },
    },
};
</script>
<style scoped>
/deep/.ivu-table-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>
<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}

.nameBox {
    display: flex;
    justify-content: space-between;
}

.formBox {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;

    &-item {
        margin-right: 30px;
    }
}


.contentBox {
    display: flex;
    flex-direction: column;
    height: 200px;


    .dishesBox {
        height: 170px;

    }
}

.btnBox {
    display: flex;
    align-items: center;
    justify-content: space-around;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        span {
            size: 12px;
        }
    }

    padding: 10px 0;
}

// .slotBox {
//     width: 100%;
//     cursor: pointer;

//     // padding: 5px 0;
//     &-item {
//         // padding: 10px 0;
//         border-bottom: 1px solid #e3e8ee;
//         min-height: 40px;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//     }
// }

// .noBorderB {
//     border-bottom: none !important;
// }</style>
